<template>
  <div class="product-card" @click="onClickCard">
    <div class="image">
      <van-image :src="props.product.imgList[0]" lazy-load />
    </div>
    <div class="name van-ellipsis">{{ props.product.name }}</div>
    <div class="price">
      ¥ <strong>{{ props.product.newPrice }}</strong>
    </div>
  </div>
</template>

<script setup lang="ts">
import { productsRes } from '../service/product/types'

const props = defineProps<{
  product: productsRes.Product
}>()
const router = useRouter()

const onClickCard = () => {
  router.push(`/product/${props.product.id}`)
}
</script>

<style lang="scss" scoped>
.product-card {
  border-radius: 10px;
  margin: 10px;
  background-color: #fff;
  .image {
    height: 175px;
    .van-image {
      height: 100%;
      width: 100%;
      :deep(img) {
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
      }
    }
  }
  .name {
    height: 20px;
    margin: 10px 0;
    word-break: break-word;
    padding-left: 10px;
  }
  .price {
    padding-left: 10px;
    padding-bottom: 10px;
    font-size: 14px;
    color: #ff4142;
    strong {
      font-size: 20px;
    }
  }
}
</style>
